<!--
  - Copyright (c) 2021.  北京维数科技有限公司
  - Date :  2021/3/25
  - Author ：F12 Console=> atob("MzMxNDkxODAwQHFxLmNvbQ==")
  - Version ：1.0.0
  -->

<template>
  <div class="app-container calendar-list-container no-padding">
    <el-row>
      <div class="xf-tabletop-handles" style="margin-top: 10px;padding-bottom:5px;">
      <div class="xf-tabhd-left">
        <el-radio-group v-model="radioType" @change="switchTable" size="mini">
          <el-radio-button label="inspect">巡检记录</el-radio-button>
          <el-radio-button label="loss">漏检记录</el-radio-button>
        </el-radio-group>
        <el-button class="inspection-export-xsl" v-if="radioType==='inspect'&&list.length>0" @click="downloadIns" type="text" size="mini">导出表格</el-button>
        <el-button class="inspection-export-xsl" v-if="radioType==='loss'&&list.length>0" @click="downloadLos" type="text" size="mini">导出表格</el-button>
      </div>
      <div class="xf-tabhd-right">
        <div class="inspection-btns-changecontent" v-show="radioType==='inspect'">
          <span style="font-size: 14px;">巡检结果</span>
          <el-select v-model="listQuery.inspectionResult" filterable placeholder="请选择" size="mini">
            <el-option label="全部" value="-1"></el-option>
            <el-option label="正常" value="0"></el-option>
            <el-option label="异常" value="1"></el-option>
          </el-select>
          <el-button class="filter-item" type="primary" @click="handleFilter" size="mini">查询</el-button>
          <el-popover placement="bottom-end" width="700" class="xf-custom-poper" @show="getSelected('0')" v-model="visible2">
            <div class="xf-double-form">
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">设施编号</p>
                  <el-input v-model="slistQuery.facilitiesNo" placeholder="请输入设施编号"></el-input>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">设施类型</p>
                  <el-select v-model="slistQuery.equipmentType" filterable placeholder="请选择设施类型" style="width: 100%;">
                    <el-option v-for="(item,index) in selectTypeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">所属建筑</p>
                  <el-select v-model="slistQuery.bName" placeholder="请选择所属建筑" style="width: 100%;">
                    <el-option v-for="(item,index) in buildList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">楼层</p>
                  <el-input v-model="slistQuery.floorId" placeholder="请输入楼层"></el-input>
                </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">位置描述</p>
                  <el-input v-model="slistQuery.positionDescription" placeholder="请输入位置描述"></el-input>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">巡检人</p>
                  <el-input v-model="slistQuery.inspectionPerson" placeholder="请输入巡检人"></el-input>
                </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">联系电话</p>
                  <el-input v-model="slistQuery.mobilePhone" placeholder="请输入联系电话"></el-input>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">巡检时间</p>
                  <el-date-picker
                    style="width: 320px"
                    v-model="slistQuery.inspectionDateStr"
                    type="daterange"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                  >
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div style="text-align: left; margin: 0; margin-top:20px;">
              <el-button size="mini" type="primary" @click="pointerQuery">查询</el-button>
              <el-button size="mini" type="text" @click="visible2 = false">取消</el-button>
            </div>
            <el-button slot="reference" type="text" size="mini">高级查询</el-button>
          </el-popover>
        </div>
        <div class="inspection-btns-changecontent" v-show="radioType==='loss'">
          <span style="font-size: 14px;">设施编号</span>
          <el-input v-model="loslistQuery.facilitiesNo" clearable placeholder="请输入设施编号" class="xf-query-input" size="mini"></el-input>
          <el-button class="filter-item" type="primary" @click="loshandleFilter" size="mini">查询</el-button>
          <el-popover placement="bottom-end" width="700" class="xf-custom-poper" @show="getSelected('1')" v-model="visible3">
            <div class="xf-double-form">
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">设施类型</p>
                  <el-select v-model="losslistQuery.equipmentType" filterable placeholder="请选择设施类型" style="width: 100%;">
                    <el-option v-for="(item,index) in selectTypeList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">所属建筑</p>
                  <el-select v-model="losslistQuery.bName" placeholder="请选择所属建筑" style="width: 100%;">
                    <el-option v-for="(item,index) in buildList" :key="index" :label="item" :value="item"></el-option>
                  </el-select>
                </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">楼层</p>
                  <el-input v-model="losslistQuery.floorId" placeholder="请输入楼层"></el-input>
                </div>
                <div class="xf-dbform-item__sright">
                  <p class="xf-dbform-item__label">位置描述</p>
                  <el-input v-model="losslistQuery.positionDescription" placeholder="请输入位置描述"></el-input>
                </div>
              </div>
              <div class="xf-dbform-item">
                <div class="xf-dbform-item__sleft">
                  <p class="xf-dbform-item__label">计划完成时间</p>
                  <el-date-picker
                    style="width: 320px"
                    v-model="losslistQuery.plannedCompletionTimeStr"
                    type="daterange"
                    :picker-options="pickerOptions"
                    value-format="yyyy-MM-dd"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期">
                    >
                  </el-date-picker>
                </div>
              </div>
            </div>
            <div style="text-align: left; margin: 0; margin-top:20px;">
              <el-button size="mini" type="primary" @click="lospointerQuery">查询</el-button>
              <el-button size="mini" type="text" @click="visible3 = false">取消</el-button>
            </div>
            <el-button slot="reference" size="mini" type="text">高级查询</el-button>
          </el-popover>
        </div>
      </div>
      </div>
    </el-row>
    <el-table
      key='tableKey'
      :data="list"
      v-loading="listLoading" fit style="width: 100%" v-if="radioType==='inspect'">
      <el-table-column label="巡检结果">
        <template slot-scope="scope">
          <span :style="{color:scope.row.color}">{{scope.row.inspectionResult}}</span>
        </template>
      </el-table-column>
      <el-table-column label="状态变更">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentStatus}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施编号">
        <template slot-scope="scope">
          <span>{{scope.row.facilitiesNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施类型">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属建筑">
        <template slot-scope="scope">
          <span>{{scope.row.bName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="楼层">
        <template slot-scope="scope">
          <span>{{scope.row.floor}}</span>
        </template>
      </el-table-column>
      <el-table-column label="位置描述">
        <template slot-scope="scope">
          <span>{{scope.row.positionDescription}}</span>
        </template>
      </el-table-column>
      <el-table-column label="巡检人">
        <template slot-scope="scope">
          <span>{{scope.row.inspectionPerson}}</span>
        </template>
      </el-table-column>
      <el-table-column label="联系电话">
        <template slot-scope="scope">
          <span>{{scope.row.mobilePhone}}</span>
        </template>
      </el-table-column>
      <el-table-column label="巡检时间">
        <template slot-scope="scope">
          <span>{{scope.row.inspectionDate}}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划完成时间">
        <template slot-scope="scope">
          <span>{{scope.row.plannedCompletionTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="130" fixed="right">
        <template slot-scope="scope">
          <el-button size="small" type="text" @click="viewDetail(scope.row)">
            查看明细
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-table
      key='tableKey'
      :data="list"
      v-loading="listLoading" fit style="width: 100%" v-if="radioType==='loss'">
      <el-table-column label="设施编号">
        <template slot-scope="scope">
          <span>{{scope.row.facilitiesNo}}</span>
        </template>
      </el-table-column>
      <el-table-column label="设施类型">
        <template slot-scope="scope">
          <span>{{scope.row.equipmentType}}</span>
        </template>
      </el-table-column>
      <el-table-column label="所属建筑">
        <template slot-scope="scope">
          <span>{{scope.row.bName}}</span>
        </template>
      </el-table-column>
      <el-table-column label="楼层">
        <template slot-scope="scope">
          <span>{{scope.row.floor}}</span>
        </template>
      </el-table-column>
      <el-table-column label="位置描述">
        <template slot-scope="scope">
          <span>{{scope.row.positionDescription}}</span>
        </template>
      </el-table-column>
      <el-table-column label="计划完成时间">
        <template slot-scope="scope">
          <span>{{scope.row.plannedCompletionTime}}</span>
        </template>
      </el-table-column>
      <el-table-column label="漏检原因">
        <template slot-scope="scope">
          <span>{{scope.row.problemDescription}}</span>
        </template>
      </el-table-column>
    </el-table>
    <div v-show="!listLoading" class="sensor-pagination-container" v-if="radioType==='inspect'">
      <div></div>
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="listQuery.page" :page-sizes="[10,15,30, 50]" :page-size="listQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination>
    </div>
    <div v-show="!listLoading" class="sensor-pagination-container" v-if="radioType==='loss'">
      <div></div>
      <el-pagination @size-change="loshandleSizeChange" @current-change="loshandleCurrentChange" :current-page.sync="loslistQuery.page" :page-sizes="[10,15,30, 50]" :page-size="loslistQuery.limit" layout="total, sizes, prev, pager, next, jumper" :total="lostotal"> </el-pagination>
    </div>
    <!--室内路线选取-->
    <insideDetail :Show.sync="insideDetailShow" :id.sync="recordId"></insideDetail>
  </div>
</template>

<script>
  import request from '@/utils/request'
  import {
    page,
    exportRecord,
    pageloss,
    insiderLinkwith
  } from "@/api/device/inspectionRecord/index";

  import insideDetail from './insiderTagDetail';

  import {
    selectCountByBuild,
  } from "@/api/device/exceptionRecord/index";

    export default {
        name: "insiderTag",
      components:{insideDetail},
        data(){
          return {
            radioType:'inspect',
            tableKey:'0',
            selectTypeList:[],
            insideDetailShow:false,
            recordId:'',
            visible2:false,
            visible3:false,
            buildList:[],
            listQuery:{
              page: 1,
              limit: 15,
              inspectionResult:'-1',
            },
            loslistQuery:{
              page: 1,
              limit: 15,
              facilitiesNo:'',
            },
            list:[],
            slistQuery:{
              facilitiesNo:'',
              equipmentType:'全部',
              bName:'全部',
              floorId:'',
              positionDescription:'',
              inspectionPerson:'',
              mobilePhone:'',
              inspectionDateStr:''
            },
            losslistQuery:{
              equipmentType:'全部',
              bName:'全部',
              floorId:'',
              positionDescription:'',
              plannedCompletionTimeStr:''
            },
            total: null,
            lostotal:null,
            listLoading: false,
            pickerOptions: {
              disabledDate(time) {
                return time.getTime() > Date.now() - 8.64e6
              }
            },
            params:{
              channelId:"",
            },
          }
        },
      created(){
        this.params.channelId=this.$route.params.id;
        this.getList()
      },
      methods:{

        fileDownload(data, fileName){
          let blob = new Blob([data], {
            type: "application/octet-stream"
          });
          let filename = fileName || "filename.xls";
          if (typeof window.navigator.msSaveBlob !== "undefined") {
            window.navigator.msSaveBlob(blob, filename);
          } else {
            var blobURL = window.URL.createObjectURL(blob);
            var tempLink = document.createElement("a");
            tempLink.style.display = "none";
            tempLink.href = blobURL;
            tempLink.setAttribute("download", filename);
            if (typeof tempLink.download === "undefined") {
              tempLink.setAttribute("target", "_blank");
            }
            document.body.appendChild(tempLink);
            tempLink.click();
            document.body.removeChild(tempLink);
            window.URL.revokeObjectURL(blobURL);
          }
        },
        downloadIns(){
        //  下载
          let parmas = Object.assign(
            JSON.parse(JSON.stringify(this.listQuery)),
            JSON.parse(JSON.stringify(this.slistQuery)),{inspectionDateStr:JSON.parse(JSON.stringify(String(this.slistQuery.inspectionDateStr)))}
          );
          let self = this;
          request({
            method: 'post',
            url: '/api/device/deviceIndoorRecordInspectionResults/export',
            data: parmas,
            responseType: 'blob'
          }).then(res => {
            let filename = "室内巡检记录.xlsx";
            self.fileDownload(res, filename);
          }).catch((error) => {

          })
        },
        downloadLos(){
          //  下载
          let parmas = Object.assign(
            JSON.parse(JSON.stringify(this.loslistQuery)),
            JSON.parse(JSON.stringify(this.losslistQuery)),{plannedCompletionTimeStr:JSON.parse(JSON.stringify(String(this.losslistQuery.plannedCompletionTimeStr)))}
          );
          let self = this;
          request({
            method: 'post',
            url: '/api/device/deviceIndoorRecordInspectionResults/exportLeak',
            data: parmas,
            responseType: 'blob'
          }).then(res => {
            let filename = "室内漏检记录.xlsx";
            self.fileDownload(res, filename);
          }).catch((error) => {

          })
        },
        switchTable(){
        //  切换请求
        // 切换按钮时重置分页查询条件
          this.listQuery.page = 1;
          this.listQuery.limit = 15;
          this.loslistQuery.page = 1;
          this.loslistQuery.limit = 15;
          this.restQuery();
          this.lossRestQ();
          if (this.radioType === "inspect") {
            this.tableKey = "0";
            this.loslistQuery.facilitiesNo = '';
            this.getList();
          } else {
            this.tableKey = "1";
            this.listQuery.inspectionResult = '-1';
            this.getlossList();
          }
        },
        getSelected(flag){
        // 显示建筑列表
          selectCountByBuild().then(res=>{
            this.buildList = res.data.bname;
          });
        // 显示联想搜索
          insiderLinkwith({leakFlag:flag}).then(res=>{
             if (res.status===200){
               this.selectTypeList = res.data.type;
             }
          })
        },
        lossRestQ(){
          this.losslistQuery.equipmentType = '全部';
          this.losslistQuery.bName = '全部';
          this.losslistQuery.floorId = '';
          this.losslistQuery.positionDescription = '';
          this.losslistQuery.plannedCompletionTimeStr = '';
        },
        restQuery(){
          this.slistQuery.facilitiesNo = '';
          this.slistQuery.equipmentType = '全部';
          this.slistQuery.bName = '全部';
          this.slistQuery.floorId = '';
          this.slistQuery.positionDescription = '';
          this.slistQuery.inspectionPerson = '';
          this.slistQuery.mobilePhone = '';
          this.slistQuery.inspectionDateStr = '';
        },
        handleFilter(){
          //重置高级查询条件
          this.restQuery();
          this.getList();
        },
        loshandleFilter(){
          this.lossRestQ();
          this.getlossList();
        },
        pointerQuery(){
          // 高级查询
          this.visible2 = false;
          this.listLoading = true;
          // 取消绑定并合并查询条件
          let contactKeys = Object.assign(
            JSON.parse(JSON.stringify(this.listQuery)),
            JSON.parse(JSON.stringify(this.slistQuery)),{inspectionDateStr:JSON.parse(JSON.stringify(String(this.slistQuery.inspectionDateStr)))}
          );
          page(contactKeys).then(res => {
            this.list = res.data.rows;
            this.total = res.data.total;
            this.listLoading = false;
          });
        },
        lospointerQuery(){
          // 高级查询
          this.visible3 = false;
          this.listLoading = true;
          // 取消绑定并合并查询条件
          let contactKeys = Object.assign(
            JSON.parse(JSON.stringify(this.loslistQuery)),
            JSON.parse(JSON.stringify(this.losslistQuery)),{plannedCompletionTimeStr:JSON.parse(JSON.stringify(String(this.losslistQuery.plannedCompletionTimeStr)))}
          );
          pageloss(contactKeys).then(res => {
            this.list = res.data.rows;
            this.lostotal = res.data.total;
            this.listLoading = false;
          });
        },
        viewDetail(row){
            this.insideDetailShow = true;
            this.recordId = String(row.id);
        },
        handleSizeChange(val) {
          this.listQuery.limit = val;
          this.getList();
        },
        loshandleSizeChange(val) {
          this.loslistQuery.limit = val;
          this.getlossList();
        },
        handleCurrentChange(val) {
          this.listQuery.page = val;
          this.getList();
        },
        loshandleCurrentChange(val) {
          this.loslistQuery.page = val;
          this.getlossList();
        },
        getList() {
          this.listLoading = true;
          let parmas = Object.assign(
            JSON.parse(JSON.stringify(this.listQuery)),
            JSON.parse(JSON.stringify(this.slistQuery)),{inspectionDateStr:JSON.parse(JSON.stringify(String(this.slistQuery.inspectionDateStr)))}
          );
          page(parmas).then(res => {
            this.list = res.data.rows;
            this.total = res.data.total;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          })
        },
        getlossList() {
          this.listLoading = true;
          let parmas = Object.assign(
            JSON.parse(JSON.stringify(this.loslistQuery)),
            JSON.parse(JSON.stringify(this.losslistQuery)),{plannedCompletionTimeStr:JSON.parse(JSON.stringify(String(this.losslistQuery.plannedCompletionTimeStr)))}
          );
          pageloss(parmas).then(res => {
            this.list = res.data.rows;
            this.lostotal = res.data.total;
            this.listLoading = false;
          }).catch(()=>{
            this.listLoading = false;
          })
        },
      }
    }
</script>

<style lang="scss" rel="stylesheet/scss">
  .el-table th {
    background: #f5f7fa;
  }
  .xf-query-input,
  .xf-query-select {
    width: 200px;
    margin: 0 10px;
  }
  .xf-query-input,
  .xf-query-select {
    width: 200px;
    margin: 0 10px;
  }
  // 精准查询
  .xf-double-form{
    .xf-dbform-item{
      display: flex;
      justify-content: space-between;
      .xf-dbform-item__sleft{
        .el-input{
          width: 320px;
        }
      }
      .xf-dbform-item__sright{
        .el-input{
          width: 320px;
        }
      }
    }
  }
  .inspection-export-xsl{
    margin-left: 10px;
    position: relative;
    top: 2px;
  }
</style>
